<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
		<!-- Page title -->
		<title>开关</title>
		<style type="text/css">
			.darkBox {
				width: 80px;
				height: 35px;
				position: relative;
				margin: auto;
			}

			.darkBox:before {
				content: "ON";
				width: 40px;
				height: 35px;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.darkBox:after {
				content: "OFF";
				width: 40px;
				height: 35px;
				position: absolute;
				right: 0;
				top: 0;
			}

			input[type=checkbox] {
				position: absolute;
				opacity: 0;
			}

			input[type=checkbox]:checked+label:before {
				background: #3ccd58;
			}

			input[type=checkbox]:checked+label:after {
				left: 40px;
			}

			label {
				width: 40px;
				height: 35px;
				position: relative;
			}

			label:before {
				content: "";
				width: 80px;
				height: 35px;
				position: absolute;
				/*left:0;*/
				background: #fe5453;
				border-radius: 50px;
			}

			label:after {
				content: "";
				width: 40px;
				height: 35px;
				position: absolute;
				left: 0;
				background: #b1b1b1;
				z-index: 2;
				transition: all 0.2s ease;
				border-radius: 50px;
			}
		</style>
	</head>

	<body>
		<div class="darkBox">
			<input type="checkbox" id="inp" value="inp name="inp" />
			<label for="inp"></label>
		</div>
	</body>
</html>
<script>
</script>
